<template>
    <div class="app-container">
        <div class="filter-container">
            <el-date-picker style="float:left;margin-right:4px;"
                            v-model="listQuery.assignDate"
                            clearable
                            type="daterange"
                            range-separator="-"
                            start-placeholder="指派开始日期"
                            end-placeholder="指派结束日期">
            </el-date-picker>
            <el-input v-model="listQuery.filename" placeholder="名称" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
            <el-select v-model="listQuery.importance" placeholder="重要性" clearable style="width: 200px" class="filter-item" @change="handleFilter">
                <el-option v-for="item in importanceOptions" :key="item.val" :label="item.label" :value="item.val" />
            </el-select>
            <el-select v-model="listQuery.type" placeholder="类型" clearable class="filter-item" style="width: 200px" @change="handleFilter">
                <el-option v-for="item in typeOptions" :key="item.val" :label="item.label" :value="item.val"  />
            </el-select>
            <el-select v-model="listQuery.process" placeholder="状态" clearable style="width: 200px" class="filter-item" @change="handleFilter">
                <el-option v-for="item in processOptions" :key="item" :label="item" :value="item" />
            </el-select>
            <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                Search
            </el-button>
        </div>

        <el-table
                :key="tableKey"
                v-loading="listLoading"
                :data="list"
                border
                fit
                highlight-current-row
                style="width: 100%;"
                @sort-change="sortChange"
        >
            <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80">
                <template slot-scope="scope" align="center">
                    <span>{{ scope.row.id }}</span>
                </template>
            </el-table-column>

            <el-table-column label="名称" min-width="150px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.filename }}</span>
                </template>
            </el-table-column>

            <el-table-column label="类型" min-width="100px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.attach.suffix }}</span>
                </template>
            </el-table-column>

            <el-table-column label="重要性" min-width="150px" align="center">
                <template slot-scope="scope">
                    <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon" />
                </template>
            </el-table-column>

            <el-table-column label="创建人/时间" width="180px" align="center">
                <template slot-scope="scope">
                    <p>{{ scope.row.attach.username }}</p>
                    <p>{{ scope.row.assigned_at }}</p>
                </template>
            </el-table-column>

            <el-table-column label="指派" width="150px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.username }}</span>
                </template>
            </el-table-column>

            <el-table-column label="指派时间" width="180px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.assigned_at }}</span>
                </template>
            </el-table-column>

            <el-table-column label="完成时间" width="180px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.finished_at }}</span>
                </template>
            </el-table-column>

            <el-table-column label="状态" width="150px" align="center">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.process=='未指派'" type="">
                        {{ scope.row.process }}
                    </el-tag>
                    <el-tag v-if="scope.row.process=='待开始'" type="">
                        {{ scope.row.process }}
                    </el-tag>
                    <el-tag v-if="scope.row.process=='已取消'" type="info">
                        {{ scope.row.process }}
                    </el-tag>
                    <el-tag v-if="scope.row.process=='已完成'" type="success">
                        {{ scope.row.process }}
                    </el-tag>
                    <el-tag v-if="scope.row.process=='进行中'" type="warning">
                        {{ scope.row.process }}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column label="操作" class-name="small-padding fixed-width" width="230px">
                <template slot-scope="{row}">
                    <el-button v-if="row.process=='待开始'" type="primary" size="mini" @click="handleStart(row)">
                        开始
                    </el-button>
                    <el-button v-if="row.process=='进行中'" size="mini" type="success" @click="handleFinish(row)">
                        完成
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="limit" @pagination="getList" />

        <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
            <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
                <el-table-column prop="key" label="Channel" />
                <el-table-column prop="pv" label="Pv" />
            </el-table>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogPvVisible = false">Confirm</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
    import waves from '@/directive/waves' // waves directive
    import Pagination from '@/components/Pagination' // secondary package based on el-pagination

    export default {
        name: 'myTask',
        components: { Pagination },
        directives: {waves},
        data() {
            return {
                tableKey: 0,
                list: null,
                total: 0,
                page: 1,
                limit: 20,
                listLoading: true,
                listQuery: {
                    importance: undefined,
                    title: undefined,
                    type: undefined,
                    process: undefined,
                    assignDate: undefined,
                    sort: '-id',
                },
                importanceOptions: [{val: 1, label: "1星"}, {val: 2, label: "2星"}, {val: 3, label: "3星"}],
                typeOptions: [
                    {val: "doc", label: "文档（doc）"},
                    {val: "excel", label: "表格（excel）"},
                    {val: "zip", label: "压缩文件（zip）"}
                ],
                processOptions: ['未指派', '待开始', '已取消', '已完成', '进行中'],

                dialogPvVisible: false,
                pvData: [],
            }
        },
        created() {
            this.getList()
        },
        methods: {
            getList() {
                this.listLoading = true
                this.$adminApi.task_my({
                    page:this.page,
                    limit:this.limit,
                    search:this.listQuery
                }).then(response => {
                    this.list = response.data.rows
                    this.total = response.data.total

                    // Just to simulate the time of the request
                    setTimeout(() => {
                        this.listLoading = false
                    }, 1.5 * 1000)
                }).catch((e)=>{
                    this.loading = false
                })
            },
            handleFilter() {
                this.page = 1
                this.getList()
            },
            sortChange(data) {
                const { prop, order } = data
                if (prop === 'id') {
                    this.sortByID(order)
                }
            },
            sortByID(order) {
                if (order === 'ascending') {
                    this.listQuery.sort = '+id'
                } else {
                    this.listQuery.sort = '-id'
                }
                this.handleFilter()
            },
            handleStart(row) {
                console.log(row);
                this.$router.push({
                    name: 'startTask',
                    params: { id: row.id }
                })
            },
            handleFinish(row) {
                this.$router.push({
                    name: 'finishTask',
                    params: { id: row.id }
                })
            },
        }
    }
</script>
